<!DOCTYPE HTML>
<html lang="zh-CN">
<head>
	<meta charset="UTF-8"/>
	<meta http-equiv="X-UA-Compatible" content="IE=edge">
	<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no">
	<title>标题</title>
	<meta name="Keywords" content="关键字"/>
	<meta name="Description" content="页面的简介"/>
	<!--[if lt IE 9]>
      <script src="//cdn.bootcss.com/html5shiv/3.7.2/html5shiv.min.js"></script>
      <script src="//cdn.bootcss.com/respond.js/1.4.2/respond.min.js"></script>
    <![endif]-->
	<!--<link rel="stylesheet" href="//cdn.bootcss.com/bootstrap/3.3.5/css/bootstrap.min.css">-->
		
		
		
		<link rel="stylesheet" href="css/bootstrap.min.css" />
		<link rel="stylesheet" type="text/css" href="css/new_file.css"/> <!--自用css文件-->
		<link rel="stylesheet" href="font-awesome/css/font-awesome.min.css">
		<script src="https://cdn.staticfile.org/vue/2.2.2/vue.min.js"></script>
		<script src="js/new_file.js" type="text/javascript" charset="utf-8"></script>
		<script type="text/javascript">
			let str = 0;
			
			window.onload=function(){
				new Vue({
					el:'#my',
					data:{
						all:false,
						num:0,
						judge: '',
						Totals:0,
						item:[
							{	
								resuits:0,
								isif:false,
								url:'img/lunbo1.jpg',
								text:'开间茶馆吧。在某个临水的地方，不招摇，不繁闹。有一些古旧，一些单薄,生意冷清，甚至被人s',
								money:10, 
								ind:0,
							},
							{	resuits:0,
								isif:false,
								url:'img/lunbo2.jpg',
								text:'开间茶馆吧。在某个临水的地方，不招摇，不繁闹。有一些古旧，一些单薄,生意冷清，甚至被人',
								money:15, 
								ind:0,
							},
							{	resuits:0,
								isif:false,
								url:'img/guanyu2.jpg',
								text:'开wadsa 间茶馆吧。在某个临水的地方，不招摇，不繁闹。有一些古旧，一些单薄,生意冷清，甚至被人',
								money:5.3, 
								ind:0,
							},
							{	resuits:0,
								isif:false,
								url:'img/ww.jpg',
								text:'开wadsa 间茶馆吧。在某个临水的地方，不招摇，不繁闹。有一些古旧，一些单薄,生意冷清，甚至被人',
								money:6, 
								ind:0,
							}
							
						]
					},
					methods:{
						add(index){  //数量加一

							this.item[index].ind+=1;
							
							str=index;
							this.resuit();
							let self =this;
							this.item.forEach(function(cur){
								console.log(cur.resuits)
								self.Totals=cur.resuits;
							})
						},
						reduce(index){    //数量减一
						 	if(this.item[index].ind<1){
						 		return;
						 	}
							this.item[index].ind-=1;
							str=index;
							this.resuit();
							this.Totals=this.item[index].resuits;
						},
						resuit(){    //小计
							this.item[str].resuits=this.item[str].money*this.item[str].ind;
						},
						check(){   //按钮
							this.judge =this.item.filter(function(cur){
								return cur.isif==true;
							})
						
							if(this.judge.length == this.item.length){
								this.all=true;
							}else{
								this.all=false;
							}
						},
						del(index){   // 删除
							if(this.item[index].isif==true){
								this.item.splice(index,1);
							}
						},
						quanxe(){   //全选
							if(this.all==true){
								this.item.forEach(function(cur){
									cur.isif = true;
								})
							}else{
								this.item.forEach(function(cur){
									cur.isif = false;
								})
							}
							this.check();
						},
						qingkong(){
							this.item = this.item.filter(function(cur){
									return cur.isif ==false;
							})
						},
					
						
					},
					
					
				})
			}
		</script>
</head>
<body>
	<div class="container" id="my">
		<div class="row"><img src="img/jdlogo.png"/ class="logo"></div>
		<div class="row text-center">
			<div class="col-lg-2">
			<input type="checkbox" name="" id="" value="" v-model="all" @click="quanxe"/>全部商品{{item.length}}
			</div>
			<div class="col-lg-1">商品</div>
			<div class="col-lg-1 col-lg-offset-5">单价</div>
			<div class="col-lg-1">数量</div>
			<div class="col-lg-1">小计</div>
			<div class="col-lg-1">操作</div>
		</div>
		<div class="row text-center img-text-center top2" v-for="(items,index) in item">
			<div class="col-lg-1">
			<input type="checkbox" name="" id="" value="" v-model="items.isif" @click="check()"/>
			</div>
			<div class="col-lg-1"><div class="com"><img :src="items.url"/></div></div>
			<div class="col-lg-3" style="padding-left: 57px;">{{items.text}}</div>
			<div class="col-lg-offset-3 col-lg-1">{{items.money}}</div>
			<div class="col-lg-1 btn">
				<button @click="reduce(index)">-</button>
				<input type="text" name="" id="" :value="items.ind" />
				<button @click="add(index)">+</button>
			</div>
			<div class="col-lg-1">{{items.resuits}}</div>
			<div class="col-lg-1" @click="del(index)">删除</div>
		
		</div>
		<div class="text-right top3" @click="qingkong()">清空已选中</div>
		<div class="text-right top3">已经选购{{judge.length}}</div>
		<div class="text-right top3">结算:{{Totals}}</div>
		<div class="text-right top3">加入购物车</div>
	</div>

<!--<script src="//cdn.bootcss.com/jquery/1.11.3/jquery.min.js"></script>
<script src="//cdn.bootcss.com/bootstrap/3.3.5/js/bootstrap.min.js"></script>-->
<script type="text/javascript" src="js/jquery-1.11.3.min.js" ></script>
<script type="text/javascript" src="js/bootstrap.min.js" ></script>

</body>
</html>